<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="header-title">健康资讯</text>
      <view class="placeholder"></view>
    </view>

    <!-- 资讯内容 -->
    <scroll-view class="content" scroll-y="true">
      <view class="news-header">
        <text class="news-title">{{ newsDetail.title }}</text>
        <view class="news-meta">
          <text class="meta-item">{{ newsDetail.date }}</text>
          <text class="meta-item">{{ newsDetail.source }}</text>
          <text class="meta-item">{{ newsDetail.readCount }}人已读</text>
        </view>
      </view>

      <view class="news-image-container" v-if="newsDetail.image">
        <image :src="newsDetail.image" class="news-image" mode="widthFix"></image>
      </view>

      <view class="news-content">
        <rich-text class="news-text" :nodes="newsDetail.content"></rich-text>
      </view>

      <!-- 相关资讯 -->
      <view class="related-news">
        <view class="section-title">相关资讯</view>
        <view class="related-list">
          <view 
            class="related-item" 
            v-for="(item, index) in relatedNews" 
            :key="index"
            @click="viewRelatedNews(item)"
          >
            <image :src="item.image" class="related-image" mode="aspectFill"></image>
            <view class="related-info">
              <text class="related-title">{{ item.title }}</text>
              <view class="related-meta">
                <text class="meta-item">{{ item.date }}</text>
                <text class="meta-item">{{ item.readCount }}人已读</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsId: '',
      newsDetail: {
        id: 1,
        title: '夏季养生保健小常识',
        date: '2023-06-15',
        source: '健康科普',
        readCount: 1280,
        image: 'https://seopic.699pic.com/photo/50072/9270.jpg_wh1200.jpg',
        content: `<p>夏季是一年中阳气最盛的季节，也是人体新陈代谢最旺盛的时期。为了适应夏季的气候特点，我们需要调整养生方式，保持身体健康。</p>
                  <p><strong>1. 饮食清淡，多吃瓜果</strong></p>
                  <p>夏季天气炎热，人体消耗大，应该多吃清淡易消化的食物，如绿豆、冬瓜、丝瓜、苦瓜等。同时，要多补充水分，多吃西瓜、梨等水果，既能补充维生素，又能清热解暑。</p>
                  <p><strong>2. 适当运动，避免剧烈活动</strong></p>
                  <p>夏季运动应选择在清晨或傍晚，避免在烈日下进行剧烈运动。可以选择散步、慢跑、游泳等较为温和的运动方式，运动后要及时补充水分。</p>
                  <p><strong>3. 合理作息，保证充足睡眠</strong></p>
                  <p>夏季昼长夜短，应适当晚睡早起，但要保证充足的睡眠时间。中午可以适当午休，有助于恢复体力，提高下午的工作效率。</p>
                  <p><strong>4. 注意防暑降温</strong></p>
                  <p>外出时要做好防晒措施，戴帽子、太阳镜，涂抹防晒霜。室内要保持通风，但不要长时间吹空调，以免引起空调病。</p>
                  <p>总之，夏季养生要顺应自然规律，保持心情舒畅，合理安排饮食起居，才能安然度夏，保持身体健康。</p>`
      },
      allNews: {
        '1': {
          id: 1,
          title: '夏季养生保健小常识',
          date: '2023-06-15',
          source: '健康科普',
          readCount: 1280,
          image: 'https://seopic.699pic.com/photo/50072/9270.jpg_wh1200.jpg',
          content: `<p>夏季是一年中阳气最盛的季节，也是人体新陈代谢最旺盛的时期。为了适应夏季的气候特点，我们需要调整养生方式，保持身体健康。</p>
                    <p><strong>1. 饮食清淡，多吃瓜果</strong></p>
                    <p>夏季天气炎热，人体消耗大，应该多吃清淡易消化的食物，如绿豆、冬瓜、丝瓜、苦瓜等。同时，要多补充水分，多吃西瓜、梨等水果，既能补充维生素，又能清热解暑。</p>
                    <p><strong>2. 适当运动，避免剧烈活动</strong></p>
                    <p>夏季运动应选择在清晨或傍晚，避免在烈日下进行剧烈运动。可以选择散步、慢跑、游泳等较为温和的运动方式，运动后要及时补充水分。</p>
                    <p><strong>3. 合理作息，保证充足睡眠</strong></p>
                    <p>夏季昼长夜短，应适当晚睡早起，但要保证充足的睡眠时间。中午可以适当午休，有助于恢复体力，提高下午的工作效率。</p>
                    <p><strong>4. 注意防暑降温</strong></p>
                    <p>外出时要做好防晒措施，戴帽子、太阳镜，涂抹防晒霜。室内要保持通风，但不要长时间吹空调，以免引起空调病。</p>
                    <p>总之，夏季养生要顺应自然规律，保持心情舒畅，合理安排饮食起居，才能安然度夏，保持身体健康。</p>`
        },
        '2': {
          id: 2,
          title: '心血管疾病预防指南',
          date: '2023-06-10',
          source: '心血管科',
          readCount: 956,
          image: 'https://bpic.588ku.com/back_pic/06/19/62/89638b0b57b8148.jpg',
          content: `<p>心血管疾病是威胁人类健康的主要疾病之一，具有发病率高、死亡率高的特点。预防心血管疾病，关键在于养成良好的生活习惯。</p>
                    <p><strong>1. 合理饮食</strong></p>
                    <p>饮食要清淡，少油少盐，多吃新鲜蔬菜水果，控制胆固醇摄入。避免暴饮暴食，控制总热量摄入，保持理想体重。</p>
                    <p><strong>2. 规律运动</strong></p>
                    <p>每周至少进行150分钟中等强度的有氧运动，如快走、慢跑、游泳等。运动可以增强心肺功能，改善血液循环。</p>
                    <p><strong>3. 戒烟限酒</strong></p>
                    <p>吸烟和过量饮酒是心血管疾病的重要危险因素。戒烟限酒可以显著降低心血管疾病的风险。</p>
                    <p><strong>4. 控制血压、血糖、血脂</strong></p>
                    <p>定期监测血压、血糖、血脂水平，如有异常应及时治疗。高血压、糖尿病、高血脂是心血管疾病的重要危险因素。</p>
                    <p><strong>5. 保持心理健康</strong></p>
                    <p>避免长期精神紧张、焦虑、抑郁等不良情绪，学会调节情绪，保持心情愉悦。</p>
                    <p>预防胜于治疗，养成良好的生活习惯是预防心血管疾病最有效的方法。</p>`
        },
        '3': {
          id: 3,
          title: '心理健康不容忽视',
          date: '2023-06-05',
          source: '心理科',
          readCount: 2103,
          image: 'https://img95.699pic.com/photo/40012/5045.jpg_wh860.jpg',
          content: `<p>在现代社会快节奏的生活中，人们越来越关注身体健康，但心理健康同样重要。心理问题不仅影响生活质量，还可能导致身体疾病。</p>
                    <p><strong>1. 认识心理健康的重要性</strong></p>
                    <p>心理健康是指心理的各个方面及活动过程处于相对稳定的状态，表现为认知合理、情绪稳定、行为适当、人际和谐、适应变化。</p>
                    <p><strong>2. 常见的心理问题</strong></p>
                    <p>焦虑、抑郁、强迫症、恐惧症等是常见的心理问题。如果出现持续的情绪低落、兴趣减退、睡眠障碍等症状，应及时寻求专业帮助。</p>
                    <p><strong>3. 维护心理健康的措施</strong></p>
                    <p>保持乐观的心态，学会调节情绪；建立良好的人际关系，多与家人朋友沟通；培养兴趣爱好，丰富精神生活；规律作息，保证充足睡眠。</p>
                    <p><strong>4. 寻求专业帮助</strong></p>
                    <p>当自我调节无法缓解心理问题时，应及时寻求心理咨询师或精神科医生的帮助，不要讳疾忌医。</p>
                    <p>心理健康与身体健康同样重要，关注心理健康，享受美好生活。</p>`
        },
        '4': {
          id: 4,
          title: '老年人骨质疏松防治',
          date: '2023-05-28',
          source: '骨科',
          readCount: 1654,
          image: 'https://img95.699pic.com/photo/60065/0086.jpg_wh860.jpg',
          content: `<p>骨质疏松症是一种以骨量减少、骨组织微结构破坏为特征的疾病，导致骨脆性增加，容易发生骨折。老年人是骨质疏松的高发人群。</p>
                    <p><strong>1. 骨质疏松的危害</strong></p>
                    <p>骨质疏松最常见的后果是骨折，尤其是髋部骨折、脊柱压缩性骨折和腕部骨折。骨折不仅影响生活质量，还可能导致残疾甚至死亡。</p>
                    <p><strong>2. 骨质疏松的预防</strong></p>
                    <p>均衡饮食：多摄入富含钙质和维生素D的食物，如牛奶、豆制品、鱼类等。<br>
                    适量运动：进行负重运动和抗阻训练，如散步、慢跑、太极拳等，有助于增强骨密度。<br>
                    戒烟限酒：吸烟和过量饮酒会影响骨代谢，增加骨质疏松风险。<br>
                    防止跌倒：保持居家环境安全，避免摔倒导致骨折。</p>
                    <p><strong>3. 骨质疏松的治疗</strong></p>
                    <p>一旦确诊骨质疏松，应在医生指导下进行药物治疗，同时配合生活方式调整。常用的药物包括钙剂、维生素D、双膦酸盐等。</p>
                    <p><strong>4. 定期检查</strong></p>
                    <p>建议50岁以上人群定期进行骨密度检查，及早发现和治疗骨质疏松。</p>
                    <p>骨质疏松可防可治，关键在于早预防、早发现、早治疗。</p>`
        },
        '5': {
          id: 5,
          title: '儿童疫苗接种注意事项',
          date: '2023-05-20',
          source: '儿科',
          readCount: 3241,
          image: 'https://img95.699pic.com/photo/50050/3689.jpg_wh860.jpg',
          content: `<p>疫苗接种是预防传染病最有效、最经济的手段之一，对于儿童健康成长具有重要意义。正确认识和科学接种疫苗，是每位家长都应该掌握的知识。</p>
                    <p><strong>1. 疫苗接种前注意事项</strong></p>
                    <p>接种前要如实告知医生孩子的健康状况，包括有无发热、感冒、腹泻等症状，以及是否有过敏史、免疫缺陷等。如果孩子正在患病或身体不适，应暂缓接种。</p>
                    <p><strong>2. 疫苗接种后注意事项</strong></p>
                    <p>接种后应在医院观察30分钟，无异常反应再离开。接种当天不要洗澡，保持接种部位清洁干燥。注意观察孩子是否有发热、接种部位红肿等反应，一般1-2天内会自行缓解。</p>
                    <p><strong>3. 不宜接种疫苗的情况</strong></p>
                    <p>以下情况应暂缓或不宜接种疫苗：正在发热或患急性疾病期间；免疫功能缺陷或正在接受免疫抑制治疗；对疫苗成分过敏；患有严重心脏病、肝病、肾病等慢性疾病。</p>
                    <p><strong>4. 接种后出现不良反应如何处理</strong></p>
                    <p>轻微发热、接种部位红肿是正常反应，一般无需特殊处理。如果出现高热（超过38.5℃）、严重过敏反应等异常情况，应立即就医。</p>
                    <p><strong>5. 按时接种的重要性</strong></p>
                    <p>疫苗接种有严格的时间程序，按时接种能确保最佳的免疫效果。家长应按照免疫规划程序，及时带孩子接种各类疫苗。</p>
                    <p>科学接种疫苗，为孩子筑起健康的防护墙。</p>`
        },
        '6': {
          id: 6,
          title: '办公室人群颈椎病预防',
          date: '2023-05-15',
          source: '骨科',
          readCount: 2876,
          image: 'https://img95.699pic.com/photo/50100/5009.jpg_wh860.jpg',
          content: `<p>随着办公自动化的发展，越来越多的人需要长时间面对电脑工作，颈椎病的发病率也逐年上升。颈椎病不仅影响工作状态，还可能引发多种并发症。</p>
                    <p><strong>1. 颈椎病的常见症状</strong></p>
                    <p>颈椎病主要表现为颈肩部疼痛、僵硬，颈部活动受限，还可能伴有头晕、头痛、手臂麻木等症状。严重时甚至会影响睡眠质量和日常生活。</p>
                    <p><strong>2. 颈椎病的成因</strong></p>
                    <p>长期保持同一姿势工作，尤其是低头看电脑或手机；工作压力大，精神紧张导致颈部肌肉长期痉挛；缺乏运动，颈部肌肉力量不足等都是颈椎病的重要诱因。</p>
                    <p><strong>3. 预防颈椎病的方法</strong></p>
                    <p>调整工作姿势：电脑屏幕应与眼睛保持水平，避免长时间低头；<br>
                    定时休息：每工作1小时应起身活动5-10分钟，做颈部伸展运动；<br>
                    选择合适的枕头：枕头高度应与自己的拳头相当，保持颈椎自然弯曲；<br>
                    加强锻炼：经常做颈椎操、游泳等运动，增强颈部肌肉力量。</p>
                    <p><strong>4. 颈椎保健操推荐</strong></p>
                    <p>颈部前后左右缓慢活动；耸肩运动放松肩颈肌肉；双手抱头轻微用力向后仰；工作间隙做米字操等。这些简单的动作可以有效缓解颈部疲劳。</p>
                    <p><strong>5. 出现症状及时就医</strong></p>
                    <p>如果出现持续性颈肩疼痛、手臂麻木等症状，应及时就医检查，避免病情加重。早期诊断和治疗对颈椎病的康复非常重要。</p>
                    <p>保护颈椎从现在做起，健康工作每一天。</p>`
        }
      },
      relatedNews: [
        {
          id: 2,
          title: '心血管疾病预防指南',
          image: 'https://bpic.588ku.com/back_pic/06/19/62/89638b0b57b8148.jpg',
          date: '2023-06-10',
          readCount: 956
        },
        {
          id: 3,
          title: '心理健康不容忽视',
          image: 'https://img95.699pic.com/photo/40012/5045.jpg_wh860.jpg',
          date: '2023-06-05',
          readCount: 2103
        },
        {
          id: 4,
          title: '老年人骨质疏松防治',
          image: 'https://img95.699pic.com/photo/60065/0086.jpg_wh860.jpg',
          date: '2023-05-28',
          readCount: 1654
        }
      ]
    };
  },
  onLoad(options) {
    // 获取传递的资讯ID
    if (options.id) {
      this.newsId = options.id;
      this.loadNewsDetail(this.newsId);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    loadNewsDetail(id) {
      // 从所有资讯中找到对应ID的资讯详情
      const news = this.allNews[id];
      if (news) {
        this.newsDetail = news;
      } else {
        // 如果找不到对应资讯，使用默认资讯
        this.newsDetail = this.allNews['1'];
      }
    },
    viewRelatedNews(news) {
      // 跳转到相关资讯详情页
      this.loadNewsDetail(news.id.toString());
    }
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 999;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  font-size: 36rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
  height: 60rpx;
}

.content {
  flex: 1;
}

.news-header {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.news-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
}

.news-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.meta-item {
  font-size: 24rpx;
  color: #999;
  margin-right: 20rpx;
}

.news-image-container {
  width: 100%;
  margin-bottom: 20rpx;
}

.news-image {
  width: 100%;
  display: block;
}

.news-content {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.news-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.8;
}

.news-text ::v-deep p {
  margin-bottom: 30rpx;
}

.news-text ::v-deep strong {
  font-weight: bold;
}

.related-news {
  background-color: #fff;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 10rpx;
  border-left: 8rpx solid #007aff;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.related-item {
  display: flex;
  gap: 20rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.related-image {
  width: 180rpx;
  height: 140rpx;
  border-radius: 12rpx;
}

.related-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.related-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.related-meta {
  display: flex;
  justify-content: space-between;
}

.related-meta .meta-item {
  font-size: 20rpx;
  color: #999;
}
</style>